<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>webpack4 一点通 | 前端一锅煮</title>
    <meta name="description" content="webpack4 基础版,实用版,对比webpack3,降低心里难度">
    <link rel="icon" href="/blog/logo.jpg">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-TileColor" content="#000000">
    <meta name="keywords" content="前端一锅煮,webpack4,webpack3">
    <link rel="preload" href="/blog/assets/css/0.styles.3a36f1f3.css" as="style"><link rel="preload" href="/blog/assets/js/app.2d50d9dc.js" as="script"><link rel="preload" href="/blog/assets/js/32.3544b6a6.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.cf06b472.js"><link rel="prefetch" href="/blog/assets/js/11.57a175c6.js"><link rel="prefetch" href="/blog/assets/js/12.b32f2db2.js"><link rel="prefetch" href="/blog/assets/js/13.818a88b3.js"><link rel="prefetch" href="/blog/assets/js/14.1c54dd87.js"><link rel="prefetch" href="/blog/assets/js/15.40ea867f.js"><link rel="prefetch" href="/blog/assets/js/16.379721e3.js"><link rel="prefetch" href="/blog/assets/js/17.0b8bcd15.js"><link rel="prefetch" href="/blog/assets/js/18.41bb3889.js"><link rel="prefetch" href="/blog/assets/js/19.6362af40.js"><link rel="prefetch" href="/blog/assets/js/2.55dfcea5.js"><link rel="prefetch" href="/blog/assets/js/20.4ce40a8a.js"><link rel="prefetch" href="/blog/assets/js/21.ba4dcc65.js"><link rel="prefetch" href="/blog/assets/js/22.d2fad5dd.js"><link rel="prefetch" href="/blog/assets/js/23.2a976f6d.js"><link rel="prefetch" href="/blog/assets/js/24.a6407b77.js"><link rel="prefetch" href="/blog/assets/js/25.28818591.js"><link rel="prefetch" href="/blog/assets/js/26.a4d6759f.js"><link rel="prefetch" href="/blog/assets/js/27.fe72fdf4.js"><link rel="prefetch" href="/blog/assets/js/28.ca4a85a9.js"><link rel="prefetch" href="/blog/assets/js/29.4c6c0c28.js"><link rel="prefetch" href="/blog/assets/js/3.e235257b.js"><link rel="prefetch" href="/blog/assets/js/30.6aa9a972.js"><link rel="prefetch" href="/blog/assets/js/31.b7bccc14.js"><link rel="prefetch" href="/blog/assets/js/33.3bb697fd.js"><link rel="prefetch" href="/blog/assets/js/34.ac7cecf3.js"><link rel="prefetch" href="/blog/assets/js/35.b26fe96f.js"><link rel="prefetch" href="/blog/assets/js/36.91eb88f8.js"><link rel="prefetch" href="/blog/assets/js/37.baa3c248.js"><link rel="prefetch" href="/blog/assets/js/4.04108111.js"><link rel="prefetch" href="/blog/assets/js/5.2e3bc3e6.js"><link rel="prefetch" href="/blog/assets/js/6.88208dc4.js"><link rel="prefetch" href="/blog/assets/js/7.7913f494.js"><link rel="prefetch" href="/blog/assets/js/8.64ff3aa5.js"><link rel="prefetch" href="/blog/assets/js/9.43d70a25.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.3a36f1f3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">前端一锅煮</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/blog/page/list/" class="nav-link router-link-active">全部文章</a></div><div class="nav-item"><a href="/blog/page/vuepress/" class="nav-link">VuePress笔记</a></div><div class="nav-item"><a href="/blog/page/about/" class="nav-link">关于我</a></div> <a href="https://gitee.com/cjm0/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/blog/page/list/" class="nav-link router-link-active">全部文章</a></div><div class="nav-item"><a href="/blog/page/vuepress/" class="nav-link">VuePress笔记</a></div><div class="nav-item"><a href="/blog/page/about/" class="nav-link">关于我</a></div> <a href="https://gitee.com/cjm0/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>webpack4 一点通</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/blog/page/list/webpack4.html#安装" class="sidebar-link">安装</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/webpack4.html#基础版" class="sidebar-link">基础版</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/webpack4.html#实用版" class="sidebar-link">实用版</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/page/list/webpack4.html#package-json" class="sidebar-link">package.json</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/webpack4.html#base-conf-js" class="sidebar-link">base.conf.js</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/webpack4.html#webpack-base-js" class="sidebar-link">webpack.base.js</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/webpack4.html#webpack-dev-js" class="sidebar-link">webpack.dev.js</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/webpack4.html#webpack-prod-js" class="sidebar-link">webpack.prod.js</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/webpack4.html#webpack-dll-js" class="sidebar-link">webpack.dll.js</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/webpack4.html#注意" class="sidebar-link">注意</a></li></ul></li><li><a href="/blog/page/list/webpack4.html#对比-webpack3" class="sidebar-link">对比 webpack3</a><ul class="sidebar-sub-headers"></ul></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="webpack4-一点通"><a href="#webpack4-一点通" class="header-anchor">#</a> webpack4 一点通</h1> <blockquote><p><a href="https://webpack.docschina.org/configuration/dev-server/#devserver-proxy" target="_blank" rel="noopener noreferrer">webpack<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。</p></blockquote> <h2 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h2> <p>webpack 最新版本 <strong>v4.26.0</strong></p> <p>github star：<strong>45.292k</strong></p> <p>需要同时安装 <code>webpack</code>、<code>webpack-cli</code>、<code>webpack-dev-server</code>，建议安装在每个独立项目而不是全局，这样方便单独使用 webpack3 或者 webpack4</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> <span class="token function">add</span> webpack webpack-cli webpack-dev-server -D 
或者：
cnpm <span class="token function">install</span> webpack webpack-cli webpack-dev-server -D
</code></pre></div><div class="warning custom-block"><p class="custom-block-title">提示</p> <p>2018年8月25号webpack4正式发布。再次之后只要使用npm install webpack命令，默认安装的就是版本4</p></div> <h2 id="基础版"><a href="#基础版" class="header-anchor">#</a> 基础版</h2> <p>webpack4 会根据环境自动设置一些默认配置，下面是一个最基础的配置：</p> <p><strong>package.json</strong></p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token comment">// --config webpack.config.js  配置文件的路径</span>
<span class="token comment">// --mode=production 用到的模式</span>
<span class="token comment">// --progress 打印出编译进度的百分比值</span>
<span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">&quot;dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;webpack-dev-server --progress --mode=development --config webpack.config.js&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;webpack --progress --mode=production --config  webpack.config.js&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><p><strong>webpack.config.js</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    entry<span class="token punctuation">:</span> <span class="token string">'./main.js'</span><span class="token punctuation">,</span>
    output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        path<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        publicPath<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token comment">// 资源引用路径前后都有斜杠</span>
        filename<span class="token punctuation">:</span> <span class="token string">'[name].js'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    devServer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        open<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动打开浏览器</span>
        host<span class="token punctuation">:</span> <span class="token string">'0.0.0.0'</span><span class="token punctuation">,</span>
        port<span class="token punctuation">:</span> <span class="token number">3003</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> 
            filename<span class="token punctuation">:</span> <span class="token string">'index.html'</span><span class="token punctuation">,</span>
            template<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'template.html'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>HotModuleReplacementPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 开启webpack热更新功能</span>
        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>NoEmitOnErrorsPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// webpack编译出错跳过报错阶段，在编译结束后报错</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><p>浏览器输入 <code>http://0.0.0.0:3003/webpack-dev-server</code> 可以查看开发环境文件结构</p> <h2 id="实用版"><a href="#实用版" class="header-anchor">#</a> 实用版</h2> <h3 id="package-json"><a href="#package-json" class="header-anchor">#</a> package.json</h3> <p>在实际使用中建议分开配置，生产环境和开发环境分别对应一个配置文件</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token comment">// --config config/webpack.dev.js  配置文件的路径</span>
<span class="token comment">// --progress 打印出编译进度的百分比值</span>
<span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;start&quot;</span><span class="token operator">:</span> <span class="token string">&quot;webpack --progress --config config/webpack.dll.js&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;webpack-dev-server --progress --config config/webpack.dev.js&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;webpack --progress --config config/webpack.prod.js&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h3 id="base-conf-js"><a href="#base-conf-js" class="header-anchor">#</a> base.conf.js</h3> <p>把公共配置提取到一个公用文件 base.conf.js 中，后期所有修改都在这个文件，其他配置文件不动，减小人为错误</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> os <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'os'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">getIp</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 获取本地ip</span>
    <span class="token keyword">var</span> interfaces <span class="token operator">=</span> os<span class="token punctuation">.</span><span class="token function">networkInterfaces</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> devName <span class="token keyword">in</span> interfaces<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> iface <span class="token operator">=</span> interfaces<span class="token punctuation">[</span>devName<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> iface<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> alias <span class="token operator">=</span> iface<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>alias<span class="token punctuation">.</span>family <span class="token operator">===</span> <span class="token string">'IPv4'</span> <span class="token operator">&amp;&amp;</span> alias<span class="token punctuation">.</span>address <span class="token operator">!==</span> <span class="token string">'127.0.0.1'</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>alias<span class="token punctuation">.</span>internal<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> alias<span class="token punctuation">.</span>address<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    base<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rootPath<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
        fileName<span class="token punctuation">:</span> <span class="token string">'dist'</span><span class="token punctuation">,</span>
        filePath<span class="token punctuation">:</span> <span class="token string">'dist/static'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    dev<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        useEslint<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        host<span class="token punctuation">:</span> <span class="token function">getIp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        port<span class="token punctuation">:</span> <span class="token number">3001</span><span class="token punctuation">,</span>
        proxy<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                context<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'/v2'</span><span class="token punctuation">,</span> <span class="token string">'/xw'</span><span class="token punctuation">,</span> <span class="token string">'/wap'</span><span class="token punctuation">,</span> <span class="token string">'/information'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                target<span class="token punctuation">:</span> <span class="token string">'https://xwm.jindanlicai.com/'</span><span class="token punctuation">,</span>
                changeOrigin<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                cookieDomainRewrite<span class="token punctuation">:</span><span class="token punctuation">{</span>
                    <span class="token string">&quot;*&quot;</span><span class="token punctuation">:</span><span class="token function">getIp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="webpack-base-js"><a href="#webpack-base-js" class="header-anchor">#</a> webpack.base.js</h3> <p>提取开发环境和取生产环境的相同部分到基础配置文件 webpack.base.js 中</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./base.conf.js'</span><span class="token punctuation">)</span> <span class="token comment">// 配置文件</span>
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span> 
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> VueLoaderPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-loader/lib/plugin'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin'</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> HappyPack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'happypack'</span><span class="token punctuation">)</span> <span class="token comment">// 多进程 默认三个</span>
<span class="token keyword">const</span> os <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'os'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> happyThreadPool <span class="token operator">=</span> HappyPack<span class="token punctuation">.</span><span class="token function">ThreadPool</span><span class="token punctuation">(</span><span class="token punctuation">{</span> size<span class="token punctuation">:</span> os<span class="token punctuation">.</span><span class="token function">cpus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 处理路径</span>
<span class="token keyword">function</span> <span class="token function">resolve</span> <span class="token punctuation">(</span><span class="token parameter">dir</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
    <span class="token keyword">return</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> dir<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// eslint检测</span>
<span class="token keyword">const</span> <span class="token function-variable function">createLintingRule</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> 
    test<span class="token punctuation">:</span> <span class="token regex">/\.(js|vue)$/</span><span class="token punctuation">,</span>
    loader<span class="token punctuation">:</span> <span class="token string">'eslint-loader'</span><span class="token punctuation">,</span>
    enforce<span class="token punctuation">:</span> <span class="token string">'pre'</span><span class="token punctuation">,</span>
    exclude<span class="token punctuation">:</span> <span class="token regex">/node_modules/</span><span class="token punctuation">,</span>
    include<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        formatter<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'eslint-friendly-formatter'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        emitWarning<span class="token punctuation">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 获取当前环境</span>
<span class="token keyword">const</span> prod <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'production'</span> 

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    context<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 作用于entry 和 loader</span>
    entry<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        index<span class="token punctuation">:</span> <span class="token string">'./src/main.js'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    output<span class="token punctuation">:</span> <span class="token punctuation">{</span> 
        path<span class="token punctuation">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>base<span class="token punctuation">.</span>filePath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 输出到static这个地址 只能是绝对路径</span>
        filename<span class="token punctuation">:</span> <span class="token string">'js/[name].js'</span><span class="token punctuation">,</span>
        chunkFilename<span class="token punctuation">:</span> <span class="token string">'js/[name]_[chunkhash:6].js'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        extensions<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'.css'</span><span class="token punctuation">,</span> <span class="token string">'.less'</span><span class="token punctuation">,</span> <span class="token string">'.js'</span><span class="token punctuation">,</span> <span class="token string">'.vue'</span><span class="token punctuation">,</span> <span class="token string">'.json'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 使用的扩展名</span>
        alias<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 'vue$': 'vue/dist/vue.esm.js', // 模块别名列表</span>
            <span class="token string">'@'</span><span class="token punctuation">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 忽略的文件中不应该含有 import, require, define 的调用，或任何其他导入机制，忽略部分插件可以提高构建性能</span>
        noParse<span class="token punctuation">:</span> <span class="token regex">/^(vue|vue-router|vuex|vuex-router-sync|axios)$/</span><span class="token punctuation">,</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token operator">...</span><span class="token punctuation">(</span>config<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>useEslint <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token function">createLintingRule</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.vue$/</span><span class="token punctuation">,</span>
                loader<span class="token punctuation">:</span> <span class="token string">'vue-loader'</span><span class="token punctuation">,</span>
                include<span class="token punctuation">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.pug$/</span><span class="token punctuation">,</span>
                loader<span class="token punctuation">:</span> <span class="token string">'pug-plain-loader'</span><span class="token punctuation">,</span>
                include<span class="token punctuation">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span>
                oneOf<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                    <span class="token comment">// 这里匹配 `&lt;style module&gt;`</span>
                    <span class="token punctuation">{</span>
                        resourceQuery<span class="token punctuation">:</span> <span class="token regex">/module/</span><span class="token punctuation">,</span>
                        use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                            <span class="token punctuation">{</span>
                                <span class="token comment">// 只在生产环境下使用 CSS 提取，便于你在开发环境下进行热重载</span>
                                loader<span class="token punctuation">:</span> prod <span class="token operator">?</span> MiniCssExtractPlugin<span class="token punctuation">.</span>loader <span class="token punctuation">:</span> <span class="token string">'vue-style-loader'</span><span class="token punctuation">,</span>
                                options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                                    publicPath<span class="token punctuation">:</span> <span class="token string">'../'</span>
                                    <span class="token comment">/*
                                        复写css文件中资源路径
                                        因为css文件中的外链是相对与css的，
                                        我们抽离的css文件在可能会单独放在css文件夹内
                                        引用其他如img/a.png会寻址错误
                                        这种情况下所以单独需要配置../，复写其中资源的路径
                                    */</span>
                                <span class="token punctuation">}</span><span class="token punctuation">,</span> 
                            <span class="token punctuation">}</span><span class="token punctuation">,</span>
                            <span class="token punctuation">{</span>
                                loader<span class="token punctuation">:</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
                                options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                                    importLoaders<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                                    modules<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启 css module</span>
                                    localIdentName<span class="token punctuation">:</span> <span class="token string">'v_[hash:6]'</span> <span class="token comment">// 自定义生成的类名</span>
                                <span class="token punctuation">}</span>
                            <span class="token punctuation">}</span><span class="token punctuation">,</span>
                            <span class="token string">'postcss-loader'</span> <span class="token comment">// 自动加前缀以兼容其他浏览器</span>
                        <span class="token punctuation">]</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token comment">// 这里匹配普通的 .css 文件 或 &lt;style&gt;</span>
                    <span class="token punctuation">{</span>
                        use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                            <span class="token punctuation">{</span>
                                loader<span class="token punctuation">:</span> prod <span class="token operator">?</span> MiniCssExtractPlugin<span class="token punctuation">.</span>loader <span class="token punctuation">:</span> <span class="token string">'vue-style-loader'</span><span class="token punctuation">,</span>
                                options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                                    publicPath<span class="token punctuation">:</span> <span class="token string">'../'</span>
                                <span class="token punctuation">}</span><span class="token punctuation">,</span> 
                            <span class="token punctuation">}</span><span class="token punctuation">,</span>
                            <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
                            <span class="token string">'postcss-loader'</span><span class="token punctuation">,</span>
                        <span class="token punctuation">]</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.less$/</span><span class="token punctuation">,</span>
                oneOf<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                    <span class="token comment">// 这里匹配 `&lt;style lang=&quot;less&quot; module&gt;`</span>
                    <span class="token punctuation">{</span>
                        resourceQuery<span class="token punctuation">:</span> <span class="token regex">/module/</span><span class="token punctuation">,</span>
                        use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                            <span class="token punctuation">{</span>
                                loader<span class="token punctuation">:</span> prod <span class="token operator">?</span> MiniCssExtractPlugin<span class="token punctuation">.</span>loader <span class="token punctuation">:</span> <span class="token string">'vue-style-loader'</span><span class="token punctuation">,</span>
                                options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                                    publicPath<span class="token punctuation">:</span> <span class="token string">'../'</span>
                                <span class="token punctuation">}</span><span class="token punctuation">,</span> 
                            <span class="token punctuation">}</span><span class="token punctuation">,</span>
                            <span class="token punctuation">{</span>
                                loader<span class="token punctuation">:</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
                                options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                                    importLoaders<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
                                    modules<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启 css module</span>
                                    localIdentName<span class="token punctuation">:</span> <span class="token string">'v_[hash:6]'</span> <span class="token comment">// 自定义生成的类名</span>
                                <span class="token punctuation">}</span>
                            <span class="token punctuation">}</span><span class="token punctuation">,</span>
                            <span class="token string">'postcss-loader'</span><span class="token punctuation">,</span>
                            <span class="token string">'less-loader'</span>
                        <span class="token punctuation">]</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token comment">// 这里匹配普通的 .less 文件 或 &lt;style lang=&quot;less&quot;&gt;</span>
                    <span class="token punctuation">{</span>
                        use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                            <span class="token punctuation">{</span>
                                loader<span class="token punctuation">:</span> prod <span class="token operator">?</span> MiniCssExtractPlugin<span class="token punctuation">.</span>loader <span class="token punctuation">:</span> <span class="token string">'vue-style-loader'</span><span class="token punctuation">,</span>
                                options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                                    publicPath<span class="token punctuation">:</span> <span class="token string">'../'</span>
                                <span class="token punctuation">}</span><span class="token punctuation">,</span> 
                            <span class="token punctuation">}</span><span class="token punctuation">,</span>
                            <span class="token string">'css-loader'</span><span class="token punctuation">,</span>
                            <span class="token string">'postcss-loader'</span><span class="token punctuation">,</span>
                            <span class="token string">'less-loader'</span>
                        <span class="token punctuation">]</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
                loader<span class="token punctuation">:</span> <span class="token string">'HappyPack/loader?id=js'</span><span class="token punctuation">,</span>
                <span class="token function-variable function">exclude</span><span class="token punctuation">:</span> <span class="token parameter">file</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
                    <span class="token regex">/node_modules/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span><span class="token regex">/\.vue\.js/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span>
                <span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token comment">// url-loader 包含 file-loader，先把小于 4kb 的文件转换成 base64，然后交给 file-loader 去处理路径问题</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/</span><span class="token punctuation">,</span>
                loader<span class="token punctuation">:</span> <span class="token string">'url-loader'</span><span class="token punctuation">,</span>
                options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                    name<span class="token punctuation">:</span> <span class="token string">'img/[name]_[hash:6].[ext]'</span><span class="token punctuation">,</span>
                    limit<span class="token punctuation">:</span> <span class="token number">4096</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.(woff2?|eot|ttf|otf)(\?.*)?$/</span><span class="token punctuation">,</span>
                loader<span class="token punctuation">:</span> <span class="token string">'url-loader'</span><span class="token punctuation">,</span>
                options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                    name<span class="token punctuation">:</span> <span class="token string">'fonts/[name]_[hash:6].[ext]'</span><span class="token punctuation">,</span>
                    limit<span class="token punctuation">:</span> <span class="token number">4096</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/</span><span class="token punctuation">,</span>
                loader<span class="token punctuation">:</span> <span class="token string">'url-loader'</span><span class="token punctuation">,</span>
                options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                    name<span class="token punctuation">:</span> <span class="token string">'media/[name]_[hash:6].[ext]'</span><span class="token punctuation">,</span>
                    limit<span class="token punctuation">:</span> <span class="token number">4096</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">VueLoaderPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// vue-loader新用法</span>
        <span class="token keyword">new</span> <span class="token class-name">HappyPack</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 提高js编译速度</span>
            id<span class="token punctuation">:</span> <span class="token string">'js'</span><span class="token punctuation">,</span>
            loaders<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                loader<span class="token punctuation">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
                options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                    cacheDirectory<span class="token punctuation">:</span> <span class="token boolean">true</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="webpack-dev-js"><a href="#webpack-dev-js" class="header-anchor">#</a> webpack.dev.js</h3> <p>开发环境配置，主要是在本地启动一个服务</p> <div class="language-js extra-class"><pre class="language-js"><code>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">=</span> <span class="token string">'development'</span> <span class="token comment">// 设置当前环境为开发环境 放在最上面</span>
<span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./base.conf.js'</span><span class="token punctuation">)</span> <span class="token comment">// 配置文件</span>
<span class="token keyword">const</span> baseWebpackConfig <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./webpack.base.js'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> merge <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack-merge'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> FriendlyErrorsPlugin<span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'friendly-errors-webpack-plugin'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> CopyWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'copy-webpack-plugin'</span><span class="token punctuation">)</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseWebpackConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    mode<span class="token punctuation">:</span> <span class="token string">'development'</span><span class="token punctuation">,</span> <span class="token comment">// 启用开发模式配置</span>
    output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        publicPath<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token comment">// 资源引用路径前后都有斜杠</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    devServer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        contentBase<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>base<span class="token punctuation">.</span>fileName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 用来指定index.html所在目录</span>
        clientLogLevel<span class="token punctuation">:</span> <span class="token string">&quot;warning&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 热更新时阻止控制台显示消息 太多了 没加eslint none</span>
        overlay<span class="token punctuation">:</span> <span class="token punctuation">{</span>warnings<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> errors<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// webpack的eslint等错误、警告提示显示在页面中 全为true会停止页面运行</span>
        noInfo<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 每次启动和保存，只显示webpack编译的错误和警告信息</span>
        historyApiFallback<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 任意的跳转或404响应可以指向 index.html 页面</span>
        watchContentBase<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 修改没有被入口文件托管的文件，比如index.html文件，也会自动更新</span>
        compress<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 一切服务都启用gzip 压缩</span>
        hot<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 启动webpack热模块替换特性</span>
        inline<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动刷新</span>
        open<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动打开浏览器</span>
        host<span class="token punctuation">:</span> config<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>host<span class="token punctuation">,</span>
        port<span class="token punctuation">:</span> config<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>port<span class="token punctuation">,</span>
        proxy<span class="token punctuation">:</span> config<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>proxy<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> 
            filename<span class="token punctuation">:</span> <span class="token string">'index.html'</span><span class="token punctuation">,</span>
            template<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../src/assets/template.html'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            vendorJsName<span class="token punctuation">:</span> <span class="token string">'vendor.dll.js'</span><span class="token punctuation">,</span> <span class="token comment">// 给模板引用</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>HotModuleReplacementPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 开启webpack热更新功能</span>
        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>NoEmitOnErrorsPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// webpack编译出错跳过报错阶段，在编译结束后报错</span>
        <span class="token keyword">new</span> <span class="token class-name">FriendlyErrorsPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// webapck启动时在终端显示信息</span>
            compilationSuccessInfo<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                messages<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Your application is running here: http://</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>host<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>dev<span class="token punctuation">.</span>port<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">CopyWebpackPlugin</span><span class="token punctuation">(</span> <span class="token comment">// 本地开发环境</span>
            <span class="token punctuation">[</span> 
                <span class="token punctuation">{</span> 
                    <span class="token keyword">from</span><span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../dist/static/js/vendor.dll.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    to<span class="token punctuation">:</span> <span class="token string">'./static/'</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span> 
            <span class="token punctuation">{</span>
                ignore<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'.DS_Store'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                copyUnmodified<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> 
                <span class="token comment">// debug: &quot;debug&quot; // 是否打印复制的详细信息</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    devtool<span class="token punctuation">:</span> <span class="token string">'cheap-module-eval-source-map'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="webpack-prod-js"><a href="#webpack-prod-js" class="header-anchor">#</a> webpack.prod.js</h3> <p>生产环境配置</p> <div class="language-js extra-class"><pre class="language-js"><code>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">=</span> <span class="token string">'production'</span> <span class="token comment">// 设置当前环境为生产环境 放在最上面</span>
<span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./base.conf.js'</span><span class="token punctuation">)</span> <span class="token comment">// 配置文件</span>
<span class="token keyword">const</span> baseWebpackConfig <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./webpack.base.js'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> merge <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack-merge'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> CleanWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'clean-webpack-plugin'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> CopyWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'copy-webpack-plugin'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> OptimizeCss <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'optimize-css-assets-webpack-plugin'</span><span class="token punctuation">)</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseWebpackConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    mode<span class="token punctuation">:</span> <span class="token string">'production'</span><span class="token punctuation">,</span> <span class="token comment">// 启用生产模式配置</span>
    output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        publicPath<span class="token punctuation">:</span> <span class="token string">'./static/'</span><span class="token punctuation">,</span> <span class="token comment">// 资源引用路径前后都有斜杠</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    stats<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 未定义选项时，stats 选项的备用值(fallback value)（优先级高于 webpack 本地默认值）</span>
        all<span class="token punctuation">:</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span>
        modules<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 添加构建模块信息</span>
        children<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 添加 children 信息</span>
        colors<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// `webpack --colors` 等同于</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">CleanWebpackPlugin</span><span class="token punctuation">(</span>
            <span class="token punctuation">[</span><span class="token string">'dist/*.html'</span><span class="token punctuation">,</span> <span class="token string">'dist/static/js'</span><span class="token punctuation">,</span> <span class="token string">'dist/static/css'</span><span class="token punctuation">,</span> <span class="token string">'dist/static/img'</span><span class="token punctuation">,</span> <span class="token string">'dist/static/fonts'</span><span class="token punctuation">,</span> <span class="token string">'dist/static/media'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 删除匹配的文件</span>
            <span class="token punctuation">{</span>
                root<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 重置到根路经
                exclude<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'vendor.dll.js'</span><span class="token punctuation">,</span> <span class="token string">'vendor.manifest.json'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 这几个文件不删除
                verbose<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 开启在控制台输出信息
                dry<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 启用删除文件
            <span class="token punctuation">}</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">CopyWebpackPlugin</span><span class="token punctuation">(</span> <span class="token operator">/</span><span class="token operator">/</span> 这部分不会被 webpack loader 处理
            <span class="token punctuation">[</span> 
                <span class="token punctuation">{</span> 
                    <span class="token keyword">from</span><span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../src/public/'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    to<span class="token punctuation">:</span> <span class="token string">'public/'</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span> 
            <span class="token punctuation">{</span>
                ignore<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'.DS_Store'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                copyUnmodified<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> 
                <span class="token operator">/</span><span class="token operator">/</span> debug<span class="token punctuation">:</span> <span class="token string">&quot;debug&quot;</span> <span class="token operator">/</span><span class="token operator">/</span> 是否打印复制的详细信息
            <span class="token punctuation">}</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DllReferencePlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            manifest<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">../</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>base<span class="token punctuation">.</span>filePath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/js/vendor.manifest.json</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            context<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 和dllplugin里面的context一致
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">MiniCssExtractPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">/</span><span class="token operator">/</span> 提取css
            filename<span class="token punctuation">:</span> <span class="token string">'css/[name]_[contenthash:6].css'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">OptimizeCss</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">/</span><span class="token operator">/</span> 压缩提取的css
            assetNameRegExp<span class="token punctuation">:</span> <span class="token regex">/\.css$/g</span><span class="token punctuation">,</span>
            cssProcessor<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'cssnano'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            cssProcessorOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>discardComments<span class="token punctuation">:</span> <span class="token punctuation">{</span>removeAll<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
            canPrint<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            filename<span class="token punctuation">:</span> <span class="token string">'../index.html'</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 相对于<span class="token keyword">static</span>的路径
            template<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../src/assets/template.html'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            hash<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> 
            minify<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                removeAttributeQuotes<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 清除属性引号
                collapseWhitespace<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 清除多余空格
                minifyJS<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 压缩javascript
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            vendorJsName<span class="token punctuation">:</span> <span class="token string">'vendor.dll.js?'</span> <span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 给模板引用
            chunksSortMode<span class="token punctuation">:</span> <span class="token string">&quot;dependency&quot;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    performance<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        hints<span class="token punctuation">:</span> <span class="token string">&quot;warning&quot;</span> <span class="token operator">/</span><span class="token operator">/</span> 打包资源超过 <span class="token number">250</span>kb 出提示
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="webpack-dll-js"><a href="#webpack-dll-js" class="header-anchor">#</a> webpack.dll.js</h3> <p>提取依赖的包，这样每次 build 的时候就不用处理依赖包了，提高打包速度</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./base.conf.js'</span><span class="token punctuation">)</span> <span class="token comment">// 配置文件</span>
<span class="token keyword">const</span> <span class="token keyword">package</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../package.json'</span><span class="token punctuation">)</span> 
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> CleanWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'clean-webpack-plugin'</span><span class="token punctuation">)</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    mode<span class="token punctuation">:</span> <span class="token string">'production'</span><span class="token punctuation">,</span> <span class="token comment">// 启用生产模式配置</span>
    entry<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 如果使用了chrome的vue-devtool，那打包的时候把vue也排除掉，因为压缩过的vue是不能使用vue-devtool的</span>
        vendor<span class="token punctuation">:</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token keyword">package</span><span class="token punctuation">.</span>dependencies<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    <span class="token keyword">return</span> val <span class="token operator">!=</span> <span class="token string">'test'</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    stats<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 未定义选项时，stats 选项的备用值(fallback value)（优先级高于 webpack 本地默认值）</span>
            all<span class="token punctuation">:</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span>
            modules<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 添加构建模块信息</span>
            children<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 添加 children 信息</span>
            colors<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// `webpack --colors` 等同于</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        path<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">../</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>base<span class="token punctuation">.</span>filePath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        filename<span class="token punctuation">:</span> <span class="token string">'js/[name].dll.js'</span><span class="token punctuation">,</span>
        library<span class="token punctuation">:</span> <span class="token string">'[name]'</span> <span class="token comment">// 生成文件的映射关系，与下面DllPlugin中name配置对应</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">CleanWebpackPlugin</span><span class="token punctuation">(</span>
            <span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>base<span class="token punctuation">.</span>filePath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token punctuation">,</span>  <span class="token comment">// 匹配删除的文件</span>
            <span class="token punctuation">{</span>
                root<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 必须先重置到根路经</span>
                verbose<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启在控制台输出信息</span>
                dry<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token comment">// 启用删除文件</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DllPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 会生成一个json文件，里面是关于dll.js的一些配置信息</span>
            path<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">../</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>base<span class="token punctuation">.</span>filePath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/js/[name].manifest.json</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            name<span class="token punctuation">:</span> <span class="token string">'[name]'</span><span class="token punctuation">,</span> <span class="token comment">// 与上面output中配置对应</span>
            context<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">)</span> <span class="token comment">// 上下文环境路径（必填，为了与DllReferencePlugin存在与同一上下文中）</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="注意"><a href="#注意" class="header-anchor">#</a> 注意</h3> <p><strong>1. mode</strong></p> <p>webpack增加了一个 <code>mode</code> 配置，只有两种值 <code>development | production</code>。对不同的环境会启用不同的配置：</p> <table><thead><tr><th>选项</th> <th>描述</th></tr></thead> <tbody><tr><td><code>development</code></td> <td>会将 <code>process.env.NODE_ENV</code> 的值设为 <code>development</code>。启用 <code>NamedChunksPlugin</code> 和 <code>NamedModulesPlugin</code>。</td></tr> <tr><td><code>production</code></td> <td>会将 <code>process.env.NODE_ENV</code> 的值设为 <code>production</code>。启用 <code>FlagDependencyUsagePlugin</code>, <code>FlagIncludedChunksPlugin</code>, <code>ModuleConcatenationPlugin</code>, <code>NoEmitOnErrorsPlugin</code>, <code>OccurrenceOrderPlugin</code>, <code>SideEffectsFlagPlugin</code> 和 <code>UglifyJsPlugin</code>。</td></tr></tbody></table> <p><code>NamedModulesPlugin</code> 当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境</p> <p><code>ModuleConcatenationPlugin</code> 预编译所有模块到一个闭包中，提升你的代码在浏览器中的执行速度</p> <p><code>NoEmitOnErrorsPlugin</code> 在编译出现错误时，直接退出</p> <p><code>OccurrenceOrderPlugin</code> 为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID</p> <p><strong>2. loader</strong></p> <p>解析转换源代码,从右到左执行，链式传递</p> <p><code>include/exclude</code> 手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）</p> <p><code>css-loader</code> 使你能够使用类似 <code>@import</code> 和 <code>url(...)</code> 的方法实现 <code>require()</code> 的功能</p> <p><code>style-loader</code> 将所有的计算后的样式加入页面中</p> <p><strong>3. plugins</strong></p> <p>解决 loader 无法实现的其他事</p> <p><strong>4. Manifest</strong></p> <p>资源映射文件，解析和加载模块</p> <p><strong>5. autoprefixer.browsers</strong></p> <p><a href="https://browserl.ist" target="_blank" rel="noopener noreferrer">每个配置支持的浏览器<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p><a href="https://github.com/browserslist/browserslist" target="_blank" rel="noopener noreferrer">配置的写法<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p><code>browsers: ['&gt; 0.5%', 'last 3 versions']</code> // 兼容性最广泛</p> <p><code>browsers: ['&gt; 0.5%', 'last 2 versions', 'ie &gt; 8']</code> // 常用</p> <p><code>browsers: ['&gt; 0.5%', 'last 2 versions', 'Firefox ESR', 'not dead']</code> // 默认配置</p> <h2 id="对比-webpack3"><a href="#对比-webpack3" class="header-anchor">#</a> 对比 webpack3</h2> <p><strong>1. 增加 mode 配置</strong></p> <ul><li><p>默认生产环境开起了很多代码优化（minify, splite）</p></li> <li><p>开发时开启注视和验证，并加上了evel devtool</p></li> <li><p>生产环境不支持watching，开发环境优化了打包的速度</p></li> <li><p>自动设置process.env.NODE_EVN到不同环境，也就是不使用DefinePlugin了</p></li> <li><p>如果mode设置none，所有默认设置都会去掉</p></li></ul> <p><strong>2. 自带环境变量</strong></p> <p>可在页面代码中直接获取当前环境变量 <code>console.log(process.env.NODE_ENV)</code></p> <p><strong>3. webpack-cli</strong></p> <p>webpack 启动命令行的代码放入了 webpack-cli 中，只安装 webpack，那么它只能在 nodejs 中使用，不能再命令行中使用</p> <p><strong>4. UglifyJsPlugin</strong></p> <p>不需要使用这个插件，只需要使用 <code>optimization.minimize</code> 为 true 就行，production mode 下自动为 true</p> <p><strong>5. vue-cli3</strong></p> <p><code>vue inspect &gt; output.js</code></p></div> <div class="page-edit"><div class="edit-link"><a href="https://gitee.com/cjm0/blog/edit/master/docs/page/list/webpack4.md" target="_blank" rel="noopener noreferrer">在 Gitee 上编辑此页</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></div> <!----> </div> <!----></div></div>
    <script src="/blog/assets/js/app.2d50d9dc.js" defer></script><script src="/blog/assets/js/32.3544b6a6.js" defer></script>
  </body>
</html>
